<template>
<div class="box">
    <button @click="getData">请求数据</button>
    <table width="90%" class="table">
        <caption>
            <h2>图书列表</h2>
        </caption>
        <thead>
            <tr>
                <th>编号</th>
                <th>书名</th>
                <th>作者</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in bookData.list" key="item.id">
                <td>{{ item.id }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.author }}</td>
            </tr>
        </tbody>

    </table>
</div>
</template>

<script setup>
import {
    reactive
} from 'vue'
import request from './axios/request.js'
const bookData = reactive({ //响应式数据
    list: []
})

const getData = function () {//请求数据
    request({
        url: '/mock/getBooks',
        method: 'get'
    }).then(res => {
        bookData.list = res.data.data
    }).catch(err => {
        console.log(error)

    })

}
</script>

<style>
body,
html {
    width: 100%;
    height: 100%;
}

#app {
    width: 100% !important;
}

table {
    border-collapse: collapse;
    margin: 0 auto;
    text-align: center;
}

table td,
table th {
    border: 1px solid #cad9ea;
    color: #666;
    height: 30px;
}

table thead th {
    background-color: #CCE8EB;
    width: 100px;
}

table tr:nth-child(odd) {
    background: #fff;
}

table tr:nth-child(even) {
    background: #F5FAFA;
}
</style>
